<template>
    <div class="jzz-main" v-if="info.show">
        <div class="loading">
            <img src="../../assets/img/loading.gif" alt="">
        </div>
        <div class="bg" :style="{height:screenInfo().height+'px'}"></div>
    </div>
</template>

<script>
    export default {
        name: "jzz",//页面数据未完成时显示
        computed:{
            info(){
                return this.$store.getters.getLoadingInfo;
            }
        }
    }
</script>

<style scoped>
    .loading{
        position: fixed;
        top: 15rem;
        left: 9.5rem;
        z-index: 99;
        opacity: .7;
    }
    .loading > img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .bg{
        width: 100%;
        background-color: #000;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 98;
        opacity: .5;
    }
</style>